<template>
 <div class="conten">
    <div class="formbox">
    <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="120px"
  label-position="left"
    class="demo-ruleForm"
  >
    <el-form-item
      label="原密码"
       label-align="left"
      prop="oldPassword"

    >
      <el-input
        v-model.number="ruleForm.oldPassword"
        type="password"
        placeholder="请输入原先密码"

        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item
      label="新密码"

      prop="newPassword"

    >
      <el-input
        v-model="ruleForm.newPassword"
        type="password"
        placeholder="请输入新的密码"
        autocomplete="off"
      />
    </el-form-item>
    <el-form-item
      label="确认密码"
       label-align="left"
      prop="checkPass"

    >
      <el-input
        v-model="ruleForm.checkPass"
        type="password"
        placeholder="再次新的密码"
        autocomplete="off"
      />
    </el-form-item>
    <el-form-item>
      <el-button @click="resetForm('ruleFormRef')">取消</el-button>
      <el-button
        type="primary"
        @click="submitForm('ruleFormRef')"
      >确定</el-button>
    </el-form-item>
  </el-form>

  </div>
 </div>
</template>

<script>
import  http from "@/util/http";
import { mapGetters } from "vuex";
import { ElMessage as $msg } from 'element-plus'
import Cookies from "js-cookie"; //用Cookies存储
export default {
  computed: {
    ...mapGetters(["datas"]),
  },
  data() {
    var oldPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入老的密码"));
      }
        callback();
    };
    var newPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新的密码"));
      }
        callback();
    };
    var newPass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        _gp: "admin",
        _mt: "newPassword",
        oldPassword : "",//老密码
        newPassword : "",//新密码
        checkPass:"",
        AdminToken :  Cookies.get("token"),//管理员登录的接口
      },
      rules: {
        oldPassword: [{ validator: oldPass, trigger: "blur",required: true, }],
        newPassword:[{ validator: newPass, trigger: "blur",required: true, }],
        checkPass: [{ validator: newPass2, trigger: "blur",required: true, }],
      },
    };
  },
  watch:{

  },
  methods: {
    submitForm(ruleFormRef) {
      this.$refs[ruleFormRef].validate((valid) => {
        if (valid) {
         http.
      post(this.ruleForm)
        .then((res) => {
          if (res.data.errno == 200) {
            $msg.success("密码修改成功,请重新登录");
            // $msg.success("请重新登录");
                this.$router.replace({ path: "/Login" });

          } else {
            $msg.warning("密码修改失败!");
          }
        })
        .catch((err) => {
          $msg.error("请求错误");
        });
        } else {
          console.log("error submit!输入框不能为空!");
          return false;
        }
      });
    },
    resetForm(ruleFormRef) {
      this.$refs[ruleFormRef].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.conten{
  width: calc(80vw);
  height: calc(60vh);
  display: flex;
  align-items: center;
.formbox{
  margin: auto;
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  //表格
  .demo-ruleForm{
margin: auto;
  }
}
}
</style>
